import React from 'react';
import { connect } from 'react-redux'//使用react-redux时需要用connect连接store
import { Link } from 'react-router-dom'
import {HomeWarper} from './style'
import store from '../../store'
import { actionCreators } from './store'

class Home extends React.Component{
//不使用 react-redux时的操作更新state
/*constructor (props) {
    super(props)
    this.state = store.getState().home
    store.subscribe(()=>{
     return this.onStateChange()
    })
  }*/
  componentDidMount(){
    //使用 redux-thunk 操作异步请求,当返回值是一个函数的时候立即执行这个函数
	//使用 redux-thunk 操作store中数据改变时必须用store.dispatch调用,直接
	//调用函数返回的函数不会执行,这个时候dispatch中是一个函数,而不是一个对象了
    store.dispatch(actionCreators.getHomeList())
  }
//不使用react-reudx时使用redux中自带的订阅触发更新
/*  onStateChange(){
      this.setState(store.getState().home)
    } */
  render(){
    const {ceshi} = this.props //使用react-redux的操作解构赋值
    return (
	  <HomeWarper
	   onClick={()=>{this.props.onHandleClick()}}
	  >
	    {ceshi}
      <Link to='/detail'>
	    <button>to detail</button>
      </Link>
	  </HomeWarper>
	)
  }
}  
const mapStateToProps = state =>({
  ceshi: state.getIn(['home','ceshi'])
})
const mapDispatchToProps = dispatch =>({
    onHandleClick(){
      store.dispatch(actionCreators.changeValue("hello world"))
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(Home)